<template>
  <div class="free">
    <div class="topInfo">
      <ul>
        <li>
          <span>缴纳单位：</span>
          <span>{{ payUnit || '--' }}</span>
        </li>
        <li>
          <span>缴纳日期：</span>
          <span>{{ cashDepositInfo.operationDate || '--' }}</span>
        </li>
        <li>
          <span>缴纳方式：</span>
          <span>{{ cashDepositInfo.methodDesc || '--' }}</span>
        </li>
      </ul>
    </div>
    <el-row class="centerSection">
      <el-col :span="12" class="centerLeft">
        <el-row>
          <span class="labelWidth">担保机构：</span>
          <span class="information">{{
            cashDepositInfo.guaranteeName || '--'
          }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">担保生效日：</span>
          <span class="information">{{
            cashDepositInfo.guaranteeStartDate || '--'
          }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">担保到期日：</span>
          <span class="information">{{
            cashDepositInfo.guaranteeEndDate || '--'
          }}</span>
        </el-row>
      </el-col>
      <el-col :span="12" class="centerRight">
        <div class="centerRtTop">
          应缴金额：
          <span class="fontColorTheme"
            >{{ cashDepositInfo.shouldPayTotal }}万元</span
          >
        </div>
        <div>
          担保金额：
          <span class="fontColorTheme">{{ cashDepositInfo.payTotal }}万元</span>
        </div>
        <!-- 已审核才有未生效/生效/失效 APPROVAL-->
        <!-- 监察无需审核  MONITOR_OPERATE -->
        <div class="imgs">
          <img
            v-show="
              cashDepositInfo.status === 'DATESTART' &&
              (cashDepositInfo.approvalStatus === 'APPROVAL' ||
                cashDepositInfo.approvalStatus === 'MONITOR_OPERATE')
            "
            src="../../../static/img/deposit/effective.png"
            alt=""
          />
          <img
            v-show="
              cashDepositInfo.status === 'DATEEND' &&
              (cashDepositInfo.approvalStatus === 'APPROVAL' ||
                cashDepositInfo.approvalStatus === 'MONITOR_OPERATE')
            "
            src="../../../static/img/deposit/failure.png"
            alt=""
          />
          <img
            v-show="
              cashDepositInfo.status === 'NULLIFICATION' &&
              (cashDepositInfo.approvalStatus === 'APPROVAL' ||
                cashDepositInfo.approvalStatus === 'MONITOR_OPERATE')
            "
            src="../../../static/img/deposit/notEffective.png"
            alt=""
          />
        </div>
      </el-col>
    </el-row>
    <div class="mainDetail">
      <el-row>
        <span class="labelWidth">业务办理人：</span>
        <span class="information">{{ cashDepositInfo.operator || '--' }}</span>
      </el-row>
      <el-row>
        <span class="labelWidth">缴纳原因：</span>
        <span class="information">{{ cashDepositInfo.remark || '--' }}</span>
      </el-row>
      <!-- 黄石地区 -->
      <div v-if="isHsUser()">
        <el-row>
          <span class="labelWidth">寄件信息</span>
        </el-row>
        <div
          style="background: #eee; padding: 15px 0 0 15px; margin-bottom: 18px"
        >
          <el-row>
            <span class="labelWidth">寄件人姓名：</span>
            <span class="information">{{
              cashDepositInfo.institution || '--'
            }}</span>
          </el-row>
          <el-row>
            <span class="labelWidth">联系电话：</span>
            <span class="information">{{
              cashDepositInfo.branch || '--'
            }}</span>
          </el-row>
          <el-row>
            <span class="labelWidth">快递公司：</span>
            <span class="information">{{ cashDepositInfo.name || '--' }}</span>
          </el-row>
          <el-row>
            <span class="labelWidth">快递单号：</span>
            <span class="information">{{
              cashDepositInfo.cardCode || '--'
            }}</span>
          </el-row>
          <el-row>
            <span class="labelWidth">寄件凭证：</span>
            <span class="information" v-if="senderFile.length"
              >已上传 <el-link @click="showExpress = true">查看</el-link></span
            >
            <span class="information" v-else>未上传</span>
            <contractEnclosureDialog
              v-if="showExpress"
              dialogTitle="寄件凭证"
              :tableData="senderFile"
              @closeDialog="cancelshowExpress"
            ></contractEnclosureDialog>
          </el-row>
        </div>
      </div>
      <el-row>
        <el-col :span="1.5">
          <span class="labelWidth">{{
            isHsUser() ? '保单保函：' : '缴纳凭证：'
          }}</span>
        </el-col>
        <el-col :span="19">
          <span v-if="upLoadFile.length > 0">
            <span class="information" style="margin-right: 6px">已上传</span>
            <el-link @click="toUploadFile">查看</el-link>
          </span>
          <span v-else class="information">未上传</span>
          <contractEnclosureDialog
            v-if="uploadContract"
            :dialogTitle="isHsUser() ? '保单保函' : '缴纳凭证：'"
            :tableData="upLoadFile"
            @closeDialog="hiddenDialog"
          ></contractEnclosureDialog>
        </el-col>
      </el-row>
      <el-row>
        <span class="labelWidth">施工单位承诺书：</span>
        <span class="information">已同意</span>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cashDepositFree',
  props: [
    'depositId', //保证金id
  ],
  data() {
    return {
      deposit: '',
      payUnit: '', //缴纳单位
      companyType: '', //0 建设方  5施工方
      upLoadFile: [], //缴纳凭证
      cashDepositInfo: '',
      isDelFile: false, //附件删除不显示
      fileMarginLeft: '0', //详情文件居左样式
      uploadContract: false,

      senderFile: [],
      showExpress: false,
    }
  },
  created() {
    //获取详情数据
    this.loadDetail()
  },
  methods: {
    cancelshowExpress() {
      this.showExpress = false
    },
    loadDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.depositId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.cashDepositInfo = data
          this.companyType = data.companyType
          if (this.companyType === '0') {
            //建设方
            this.payUnit = data.ownerName //缴纳单位名称
          }
          if (this.companyType === '5') {
            //施工方
            this.payUnit = data.contractorName //缴纳单位名称
          }
          this.upLoadFile = data.file
          this.senderFile = data.senderFile
        })
        .catch((error) => {})
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
  },
}
</script>

<style scoped lang="less">
.free {
  padding: 24px;
}
.topInfo {
  height: 38px;
  font-size: 14px;
  ul li {
    float: left;
    span:last-child {
      margin-right: 60px;
    }
  }
}
.centerSection {
  width: 848px;
  height: 168px;
  background: #f5f7fb;
  border: 1px solid #dee5f4;
  padding: 30px 24px;
  position: relative;
  .centerLeft {
    border-right: 1px solid #d5dee7;
    .labelWidth {
      font-size: 16px;
      color: #333333;
      display: inline-block;
      height: 36px;
    }
    .information {
      font-size: 16px;
      color: #666666;
    }
  }
  .centerRight {
    color: #333;
    font-size: 16px;
    line-height: 16px;
    padding: 30px 24px;
    div span {
      color: #009588;
    }
    .centerRtTop {
      margin-bottom: 24px;
    }
    .imgs {
      position: absolute;
      top: -12px;
      left: 700px;
      width: 345px;
      img {
        width: 168px;
        height: 123px;
      }
    }
  }
}
.mainDetail {
  position: relative;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #dee5f4;
  .labelWidth {
    font-size: 14px;
    color: #333333;
    display: inline-block;
    height: 36px;
  }
  .information {
    font-size: 14px;
    color: #666666;
  }
  .seeFile {
    color: #409eff !important;
    &:hover {
      text-decoration: #409eff;
    }
  }
  .imgStyle {
    margin-left: 16px;
    li {
      position: relative;
      margin-right: 20px;
      margin-top: 10px;
      i {
        position: absolute;
        right: -6px;
        top: -10px;
        font-size: 20px;
      }
    }
  }
}
</style>
